<template>
	<view class="content">
		<view class="wechatapp">
			<view class="header">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar" :src="avatarUrl"></image>
				</button>
			</view>
		</view>
		
		<u--form labelPosition="top" :model="form" ref="uForm">
			<u-form-item label="姓名" prop="dataForm.truename">
				<u--input type="nickname" class="nickname weui-input" v-model="form.dataForm.truename" placeholder="请输入昵称" customStyle='background:#eee;padding:0px;' placeholderStyle="background:#eee;color:#bbb"></u--input>
			</u-form-item>
		
			<u-form-item label="身份证号" prop="dataForm.idcard">
				<u--input v-model="form.dataForm.idcard" border="none" clearable placeholder="请输入身份证号"
					customStyle='background:#eee' placeholderStyle="background:#eee;color:#bbb"></u--input>
			</u-form-item>
		
			<u-form-item label="性别" prop="dataForm.gender" labelPosition="left">
				<u-radio-group v-model="form.dataForm.gender">
					<u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in gender" :key="index"
						:label="item.name" :name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>
		
			<u-form-item label="出生生日" prop="dataForm.birthday">
				<view class="input_view" @click="show_birthday = true">{{form.dataForm.birthday}}</view>
				<u-picker :show="show_birthday" :columns="columns_birthday" :defaultIndex="[40,0,0]" keyName="label"
					@cancel="show_birthday = false" @confirm="confirm_birthday"></u-picker>
			</u-form-item>
		
			<u-form-item label="手机号码" prop="dataForm.phone">
				<u--input v-model="form.dataForm.phone" border="none" clearable placeholder="请输入手机号码"
					customStyle='background:#eee' placeholderStyle="background:#eee;color:#bbb"></u--input>
			</u-form-item>
		</u--form>
		
		<view class="sign">
			<view class="sign_inner">
				<u-button color="#00B5C3" text="保存" :disabled=disabled @click="toBuy"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				nickname:'',
				show_birthday: false,
				columns_birthday: [
					['1950', '1951', '1952', '1953', '1954', '1955', '1956', '1957', '1958', '1959',
						'1960', '1961', '1962', '1963', '1964', '1965', '1966', '1967', '1968', '1969',
						'1970', '1971', '1972', '1973', '1974', '1975', '1976', '1977', '1978', '1979',
						'1980', '1981', '1982', '1983', '1984', '1985', '1986', '1987', '1988', '1989',
						'1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999',
						'2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009',
						'2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'
					],
					['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
					['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16',
						'17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31',
					]
				],
				form: {
					dataForm: {
						truename: '',
						idcard: '',
						gender: 1,
						birthday: '',
						phone: ''
					}
				},
				gender: [{
						name: '男',
						value: 1
					},
					{
						name: '女',
						value: 2
					}
				],
			}
		},
		onLoad() {
			
		},
		methods: {
			onChooseAvatar(e) {
				this.avatarUrl = e.detail.avatarUrl
			},
			confirm_birthday(e) {
				this.form.dataForm.birthday = e.value[0] + "-" + e.value[1] + "-" + e.value[2]
				this.show_birthday = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 2%;
	}

	.input_view {
		background: #eee;
		line-height: 36px;
		height: 36px;
		padding-left: 10px;
		font-size: 15px;
		color: #bbb;
	}
	
	.wechatapp {
		padding: 80rpx 0 0 0;
		margin-bottom: 80rpx;
		text-align: center;

		.header {
			width: 190rpx;
			height: 190rpx;
			border: 4rpx solid #fff;
			margin: 0 auto 0;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 2rpx 0 10rpx rgba(50, 50, 50, 0.3);
			
			.avatar-wrapper {
				width: 190rpx;
				height: 190rpx;
				border-radius: 50%;
				padding: 0px;
			
				.avatar {
					width: 190rpx;
					height: 190rpx;
					border-radius: 50%;
				}
			}
		}
		.avatar_change{
			font-size: 12px;
			color: #999;
			margin-top: 5px;
		}
	}
	
	.sign {
		position: fixed;
		bottom: 0px;
		background-color: #fff;
		width: 96%;
		z-index: 99;
	}
	
	.sign_inner {
		width: 100%;
		margin: 0 0% 10px 0%;
	}
	
	.inner {
		padding: 0 15px 80px 15px;
	}
</style>
